<script>
import {
  defineComponent,
  reactive,
  toRefs, onMounted, watch
} from 'vue'

export default defineComponent({
  name: 'ConfigRadio',
  props: {
    list: {
      type: Array,
      default: () => {
        return [
          {
            label: '标题',
            value: 0
          }
        ]
      }
    },
    value: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      current: -1
    })

    watch(() => props.value, (e) => {
      state.current = e
    })

    watch(() => state.current, (e) => {
      emit('update:value', e)
    })

    onMounted(() => {
      state.current = props.value
    })

    const handleRadioSelect = (e) => {
      state.current = props.list[e].value
    }

    return {
      ...toRefs(state),
      handleRadioSelect
    }
  }
})
</script>

<template>
  <div class="component-config-radio-container">
    <div class="config-radio" v-for="(item, index) in list" :key="index" @click="handleRadioSelect(index)">
      <div class="circle" :class="current === item['value'] ? 'active' : ''" />
      <div class="title">{{ item['label'] }}</div>
    </div>
  </div>
</template>

<style lang="scss">
.component-config-radio-container {
  display: flex;
  align-items: center;
  .config-radio {
    height: 32px;
    display: flex;
    align-items: center;
    margin-right: 20px;
    user-select: none;
    cursor: pointer;
    .circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid #a8a7a7;
      position: relative;

      &.active::before {
        position: absolute;
        content: '';
        width: 6px;
        height: 6px;
        background: #C1272D;
        border: 1px solid #C1272D;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .title {
      margin-left: 12px;
      font-size: 14px;
    }

    &:last-child {
      margin: 0;
    }
  }
}
</style>
